<template>
  <section class="section sec-7" id="-7">
    <h2 class="mo-title txt-center">Contact Us<br />联系我们</h2>
    <div class="mo-max-size-box form ma-top-30">
      <div class="mo-lr-box gap-10">
        <div class="left">
          <div class="form-item">
            <input v-model="name" placeholder="Please input your name" type="text" />
          </div>
          <div class="form-item">
            <input v-model="email" placeholder="Please input your Email address" type="email" />
          </div>
          <div class="form-item">
            <input v-model="order" placeholder="Please input your order number like: xxx-xxxxxxx-xxxxxxx" type="text" />
          </div>
        </div>
        <div class="right">
          <div class="form-item">
            <textarea v-model="content" placeholder="Please input the content"></textarea>
          </div>
        </div>
      </div>
      <div class="form-submit">
        <button class="mo-btn large" @click="handleSend">Send Email</button>
      </div>
    </div>
  </section>
</template>
<script>
export default {
  name: 'co-section-7',
  data() {
    return {
      name: '',
      email: '',
      order: '',
      content: '',
    };
  },
  methods: {
    async handleSend() {
      if (!this.email.trim().length && !this.content.trim().length) {
        alert('请填写留言再进行发送');
        return;
      }
      await this.$sdk.request({
        method: 'POST',
        url: '/v1/mail/send',
        data: {
          from: this.$config.CONFIG_APP_ID,
          to: 'amiee@asobeage.com',
          title: this.$config.CONFIG_APP_NAME,
          content: `name: ${this.name}
email: ${this.email}
order: ${this.order}
content: ${this.content}`,
        },
      });
      alert('发送成功, 感谢你的留言, 我们会尽快回复');
    },
  },
};
</script>
<style lang="less" scoped>
.sec-7 {
  display: flex;
  flex-direction: column;
  justify-content: center;

  .form {
    width: 800px;
    margin-left: auto;
    margin-right: auto;

    .form-item {
      display: flex;
      align-items: center;
      height: 34px;
      margin-bottom: 24px;
      &:last-child {
        margin-bottom: 0;
      }

      input,
      textarea {
        border: 1px solid #000;
        display: block;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 0 8px;
        font-size: 14px;
        line-height: 32px;
        transition: all 0.2s linear;

        &:hover,
        &:active {
          border-color: #8a7856;
        }
      }
    }

    .right {
      .form-item {
        height: 100%;
      }
    }
  }

  .form-submit {
    margin-top: 30px;
    text-align: center;
  }
}

@media screen and (max-width: 1000px) {
  .sec-7 {
    .form {
      width: 100%;
    }
  }
}
</style>
